<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a>文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题：">
          <el-input v-model.trim="form.title"></el-input>
        </el-form-item>
        <el-form-item label="类型：">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容：">
            <!-- 当类型为文章的时候显示富文本，视频的时候显示上传视频按钮
            :file-list="fileList"
             -->
          <VueEditor v-if="form.type==1" ref="vueEditor" :config="config"/>
          <el-upload
            accept="video/mp4"
            v-if="form.type==2"
            :action="`${baseURL}/upload`"
            :headers="headers"
            :limit="1"
            :on-success="videoSuccess"
            >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
        </el-upload>
        </el-form-item>
        <el-form-item label="栏目：">       
            <!-- 
                indeterminate 属性用以表示 checkbox 的不确定状态（选中了一部分小选框，但没有全部选中）true表示不确定状态
                checkAll：绑定复选框的状态（checked的状态true或false）
                change：表示点击全选框触发的事件
             -->
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <!-- 
                v-model: 绑定选中的选项集合
                change：点击小选框时触发的事件
             -->
            <el-checkbox-group v-model="form.categories" @change="handleCheckedCategoryChange">
                <!-- 循环展示小选框的数据
                label: 选中状态的值 -->
                <el-checkbox v-for="item in categoryList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="封面：">
            <!-- 
                action: 上传文件的接口地址
                list-type	文件列表的类型（也就是定义列表的样式）
                on-remove：移除文件的时候触发的属性
                on-success: 文件上传成功时候的属性
                on-exceed: 上传文件超出规定数量时触发的属性
             -->
            <el-upload
            :limit="3"
            :action="`${baseURL}/upload`"
            :headers="headers"
            :on-success="coverSuccess"
            :on-remove="coverRemove"
            :on-exceed="coverExceed"
            list-type="picture-card">
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="publicFn">发布</el-button>
    </el-card>
  </div>
</template>

<script>
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import axios from "@/utils/request.js"
import  { getCategory,post } from "@/api/article.js"
/**
 * 需求：渲染栏目列表
 * 1、封装获取栏目列表的接口函数
 * 2、在文章发布页面引入函数，并在created中调用函数获取并保存数据
 * 
 * */ 
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
        baseURL: axios.defaults.baseURL,
        headers:{
            Authorization: localStorage.getItem("token-71")
        },
      form: {
        title: "", // 标题
        type: 1, // 1文章 2视频
        content: "", // 内容
        categories: [],  // 选中的栏目选项集合
        cover: [],          // 封面
      },
      categoryList: [], // 栏目列表
    isIndeterminate: false, // 默认所有选项都没有选中
    checkAll: false,
      config: { 
        // 上传图片的配置
        uploadImage: {
          url: `${axios.defaults.baseURL}/upload`,
          name: "file",
          headers: {
            //   因为富文本的图片上传是使用内置的axios请求库，因此需要单独配置token 
              Authorization: localStorage.getItem("token-71")
          },
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            //   console.log(53,res);
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },
      },
    };
  },
  created(){
      getCategory().then(res=>{
          console.log(94,res);
        //   关注和头条不需要展示（后台规定）
        this.categoryList = res.data.data;
        this.categoryList.splice(0,2);
      })
  },
  methods: {
    //   视频上传成功
      videoSuccess(response){
        //   console.log(response);
        // 保存视频上传后得到的链接
          this.form.content = this.baseURL + response.data.url;
      },
    //   上传文件超出规定数量时触发的函数
      coverExceed(){
        //   console.log(127);
        this.$message({
                type: "warning",
                message: "图片最多只能上传3张！"
        })
      },
    //   移除封面触发的函数
      coverRemove(file, fileList){
        //   file: 表示被删除的文件对象
        // fileList：表示剩下的文件对象集合
        //   console.log(file,fileList);
          this.form.cover = fileList.map(item=>{
              return {
                  id: item.response.data.id
              }
          });
      },
    //   封面上传成功的函数
      coverSuccess(response, file, fileList){
        //   console.log(response, file, fileList);
        // 保存上传的图片id
          this.form.cover.push({
              id: response.data.id
          })
      },
    //   全选框状态改变时触发的函数
    handleCheckAllChange(val){
        // console.log(81,val);
        // val: 表示全选框的状态值
        this.form.categories = val? this.categoryList.map(item=>item.id) : [];
        // 点击全选框的时候，全选框的状态要么是选中要么是没有选中，因此“不确定状态”值肯定为false
        this.isIndeterminate = false;
    },
    // 点击小选框时触发的函数
    handleCheckedCategoryChange(value){
        // value: 表示选中的选项集合
        // 1、当选中的选项集合长度等于所有栏目的数组长度的时候就表示已经全部选中了
        this.checkAll = value.length==this.categoryList.length;
        // 2、当选项选中了一部分，但是没有全选表示此刻处于不确定状态
        this.isIndeterminate = value.length>0&&value.length < this.categoryList.length;
        // console.log(value);
    },
    //   发布
      publicFn(){
        // 文章内容
        if(this.form.type == 1){
        //   console.log(this.$refs.vueEditor.editor.root.innerHTML);
            this.form.content = this.$refs.vueEditor.editor.root.innerHTML;
        }
        //   console.log(172,this.form);
        // 添加判断，判断文章相关数据是否为空
        // 判断标题
            if(!this.form.title){
                this.$message.warning("标题不能为空！")
            return
        }
        // 判断内容是否为空
        // console.log(this.$refs.vueEditor.editor.getLength());
    //      当富文本编辑器内容为空的时候，默认也会得到一个换行符，那么如何来判断富文本内容是否为空呢？
// 答：富文本给我们提供了一个getLength方法，当这个方法返回1的时候，说明此刻富文本的内容为空。
// 当用户输入的是空格的时候也不允许发布，那么我们可以通过innerText来获取富文本的内容进行判断
    if(this.form.type == 1){
        console.log(this.$refs.vueEditor.editor.root.innerHTML);
        let _DOM = this.$refs.vueEditor.editor.root.innerHTML;
        let txt = this.$refs.vueEditor.editor.root.innerText.trim();
        
        if(this.$refs.vueEditor.editor.getLength() == 1 || (!txt&&_DOM.indexOf("img")==-1)){
            this.$message.warning("内容不能为空！")   
            this.form.content = "";    // 清空富文本内容为空的时候赋值到content的换行符  
            return
        }
    }else{
        if(!this.form.content){
            this.$message.warning("请上传视频！")
            return
        }
    }

        // 栏目
        if(this.form.categories.length == 0){   
            this.$message.warning("至少选择一个栏目！")
            return 
        }
        // 封面
        if(this.form.cover.length == 0){
            this.$message.warning("至少选择一张封面！")
            return 
        }
        // 栏目
        // this.form.categories = this.form.categories.map(item=>{
        //     return {
        //         id: item
        //     }
        // })
        
        // 对象深拷贝
        let query = JSON.parse(JSON.stringify(this.form));
        query.categories = query.categories.map(item=>{
            return {
                id: item
            }
        })
        //   发布文章
        post(query).then(res=>{
            if(res.data.message == "文章发布成功"){
                // 跳转到文章列表页面
                this.$router.push("/layout/articleList")
                this.$message.success(res.data.message)
            }else{
                this.$message.error(res.data.message)
            }
        })
      }
  },
  watch: {
      "form.type"(){
        //   监听form对象中的type值的变化，当切换类型的时候情况内容
          this.form.content = "";
      }
  }
};
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
</style>